import React, { useReducer } from 'react'

import { Switch, Route, Redirect } from 'react-router-dom'
import { DotLoading } from 'antd-mobile'
import PrivateRoute from './utils/PrivateRoute'
import { initState, reducer } from './reducer/app'


const Register = React.lazy(() => import('./pages/Register/Register'))
const Login = React.lazy(() => import('./pages/Login/Login'))
const Index = React.lazy(() => import('./pages/Index/Index'))
const Detail = React.lazy(() => import('./pages/Detail/Detail'))
const List = React.lazy(() => import('./pages/List/List'))
const Search = React.lazy(() => import('./pages/Search/Search'))

export const MyContext = React.createContext()

export default function App() {
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <div className='app'>
      {/* //传递数据 */}
      <MyContext.Provider value={{state,dispatch}}>
        <React.Suspense fallback={<DotLoading color='primary' />}>
          {/* 路由视图 */}
          <Switch>
            {/* Route 路由规则 */}
            <Route path='/login' component={Login}></Route>
            <Route path='/Register' component={Register}></Route>
            <PrivateRoute path='/Index' component={Index}></PrivateRoute>
            <PrivateRoute path='/Detail/:id' component={Detail}></PrivateRoute>
            <PrivateRoute path='/List' component={List}></PrivateRoute>
            <PrivateRoute path='/Search' component={Search}></PrivateRoute>

            {/* 重定向 */}
            <Redirect to='/login'></Redirect>
          </Switch>
        </React.Suspense>
      </MyContext.Provider>
    </div>
  )
}
